<template>
	<view class="tarbar-view">
		<view class="tarbar-list" :style="{
        background: tabBar.backgroundColor,
        color: tabBar.color,
        'border-top':
          tabBar.position == 'bottom' ? '0rpx solid ' + tabBar.borderStyle : 0,
        'border-bottom':
          tabBar.position == 'top' ? '0rpx solid ' + tabBar.borderStyle : 0,
      }">
			<view class="tarbar-list-ul">
				<view class="tarbar-list-li" v-for="(item, index) in tabBar.list" :key="index"
					@click.top="setSelected(item, index)" :style="{ 'background-color': selected == index ? '' : '' }">
					<!-- <view class="lineto" v-if="index!==0"></view> -->
					<view class="new-bar-message">
						<view class="tarbar-list-li-icon">
							<image :src="
                  selected === index ? item.selectedIconPath : item.iconPath
                " mode="heightFix" />
						</view>
						<view class="tarbar-list-li-name" :style="{
                color: selected === index ? tabBar.selectedColor : '#272727',
              }">
							{{ item.text }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-ios-line"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected: "",
				tabBar: {
					color: "#ffffff",
					selectedColor: "#0480FB",
					borderStyle: "#ccc",
					backgroundColor: "transparent",
					position: "top",
					list: [{
							pagePath: "/subPage1/socialized-service/specialist-consultation/expert-module/diagnostic-list/diagnostic-list",
							iconPath: '/static/socialized-service/specialist-consultation/bottom-tabar/diagnosis.svg',
							selectedIconPath: '/static/socialized-service/specialist-consultation/bottom-tabar/diagnosis-1.svg',
							text: "诊断列表",
						},
						{
							pagePath: "/subPage1/socialized-service/specialist-consultation/expert-module/my-diagnosis/my-diagnosis",
							iconPath: "/static/socialized-service/specialist-consultation/bottom-tabar/wenzhen.svg",
							selectedIconPath: "/static/socialized-service/specialist-consultation/bottom-tabar/wenzhen-1.svg",
							text: "我的诊断",
						},
						{
							pagePath: "/subPage1/socialized-service/specialist-consultation/expert-module/my-order/my-order",
							iconPath: "/static/socialized-service/specialist-consultation/bottom-tabar/order.svg",
							selectedIconPath: "/static/socialized-service/specialist-consultation/bottom-tabar/order-1.svg",
							text: "我的预约",
						},
						{
							pagePath: "/subPage1/socialized-service/specialist-consultation/expert-module/expert-list/expert-list",
							iconPath: "/static/socialized-service/specialist-consultation/bottom-tabar/experts.svg",
							selectedIconPath: "/static/socialized-service/specialist-consultation/bottom-tabar/experts-1.svg",
							text: "我的咨询",
						},
						{
							pagePath: "/subPage1/socialized-service/specialist-consultation/expert-module/apply-list/apply-list",
							iconPath: "/static/socialized-service/specialist-consultation/bottom-tabar/wenzhen.svg",
							selectedIconPath: "/static/socialized-service/specialist-consultation/bottom-tabar/wenzhen-1.svg",
							text: "申请列表",
						},
					],
				},
			};
		},
		// props:{
		// 	selected:{
		// 		type:Number || String,
		// 		default:()=>{
		// 			return ''
		// 		}
		// 	}
		// },
		mounted() {
			this.setselectindex();
		},
		methods: {
			// 获取获取当前处于那个页面，判断index
			setselectindex() {
				let routes = getCurrentPages();
				let curRoute = routes[routes.length - 1].route;
				// console.log(curRoute)
				if (
					curRoute ===
					"subPage1/socialized-service/specialist-consultation/expert-module/diagnostic-list/diagnostic-list" ||
					curRoute ===
					"subPage1/socialized-service/specialist-consultation/expert-module/diagnostic-list/invitation-details/invitation-details"
				) {
					this.selected = 0;
				} else if (
					curRoute ===
					"subPage1/socialized-service/specialist-consultation/expert-module/my-diagnosis/my-diagnosis" ||
					curRoute ===
					"subPage1/socialized-service/specialist-consultation/expert-module/my-diagnosis/diagnosis-details/diagnosis-details"
				) {
					this.selected = 1;
				} else if (
					curRoute ===
					"subPage1/socialized-service/specialist-consultation/expert-module/my-order/my-order"
				) {
					this.selected = 2;
				} else if (
					curRoute ===
					"subPage1/socialized-service/specialist-consultation/expert-module/expert-list/expert-list"
				) {
					this.selected = 3;
				} else if (
					curRoute ===
					"subPage1/socialized-service/specialist-consultation/expert-module/apply-list/apply-list"
				) {
					this.selected = 4;
				}
			},
			// 点击底部导航栏触发方法
			setSelected(e, i) {
				if (this.selected !== i) {
					this.$store.commit({
						type: "setTabbarIndex",
						tabindex: i,
					});
					let routes = getCurrentPages();
					uni.redirectTo({
						url: e.pagePath
					});
				}
				// 强制刷新组件状态
				// this.$forceUpdate();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.tarbar-view {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 98;

		// padding-bottom: constant(safe-area-inset-bottom);  /* 兼容 iOS < 11.2 */
		// padding-bottom: env(safe-area-inset-bottom);  /* 兼容 iOS >= 11.2 */
		.tarbar-list {
			width: 90% !important;
			max-height: 355rpx;
			min-height: 100rpx;
			margin-left: 5% !important;
			box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);

			color: #4f5153;

			.tarbar-list-ul {
				height: 136rpx;
				box-shadow: 0rpx -2rpx 6rpx 2rpx rgba(1, 32, 45, 0.08);
				width: 100%;
				display: flex;
				align-items: center;
				background-color: #ffffff;
				// padding-bottom: constant(safe-area-inset-bottom);
				// /* 兼容 iOS < 11.2 */
				// padding-bottom: env(safe-area-inset-bottom);
				/* 兼容 iOS >= 11.2 */
				justify-content: space-around;
				// border-top:  1px solid #ebedf0;

				.tarbar-list-li {
					width: 20%;
					height: 136rpx;
					text-align: center;
					display: flex;
					// flex-direction: column;
					// justify-content: center;
					align-items: center;
					justify-content: center;

					// .lineto{
					// 		float: left;
					// 		height: 100rpx;
					// 		width: 3rpx;
					// 		background-image: linear-gradient(to top,#4d586f,#ffffff,#4d586f);
					// 	}
					.new-bar-message {
						width: calc(100% - 2px);
						height: 136rpx;
						// background-color: #4CD964;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.tarbar-list-li-icon {
							width: 50rpx;
							// height: 60rpx;
							margin: 0 0 6rpx;

							// background-color: #00FFEE;
							image {
								height: 50rpx;
							}
						}

						.tarbar-list-li-name {
							// background-color: #00363D;
							width: 180rpx;
							text-align: center;
							line-height: 30rpx;
							font-size: 28rpx;
							font-weight: 500;
							height: 30rpx;
							letter-spacing: 1rpx;
						}
					}
				}
			}
		}
	}
</style>